<div>
    <style>
      body {
        margin: 0px;
        color: blue;
      }
    </style>
          <canvas id="ad"></canvas>
      <script>
        var ad = document.getElementById("ad");
        var ctx = ad.getContext("2d");
        ad.height = window.innerHeight;
        ad.width = window.innerWidth;
        var chinese = "GREEF";   
        chinese = chinese.split("");
        var font_size = 10;  
        var columns = ad.width / font_size;
        var drops = [];
        for (var x = 0; x < columns; x++) drops[x] = 1;
        function draw() {
          ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; 
          ctx.fillRect(0, 0, ad.width, ad.height);
          ctx.fillStyle = "#00FF00";  
          ctx.font = font_size + "px arial";
          for (var i = 0; i < drops.length; i++) {
            var text = chinese[Math.floor(Math.random() * chinese.length)];  
            ctx.fillText(text, i * font_size, drops[i] * font_size);
            if (drops[i] * font_size > ad.height && Math.random() > 0.975)  
              drops[i] = 0;
            drops[i]++;
          }
        }
        setInterval(draw, 70); 
      </script>
       <div style="width: 100%;bottom: 0;top: 0;position: absolute;opacity: 0.7;;background-image: url(./img/green-back.jpg);background-repeat: no-repeat;background-size: cover;"></div>
  </div>
  